import React, { useEffect } from 'react';
import { Card, Form, Button, Input, Modal, Typography, message } from 'antd';
import { ExportOutlined, SaveOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

const { Title } = Typography;

export interface IssueParams {
  bid?: string;
  bname?: string;
  opinion?: string;
}

interface EditIssueProps {
  initData: {
    bhid: string;
    opinion?: string;
  };
  drawingMarks: any[];
  readonly: boolean;
  onSaveIssue?: (
    payload: { bhid?: string; opinion?: string; marks?: any },
    callback: (success: boolean) => void,
  ) => void;
  onPropsChange: (val: any) => void;
}

const EditIssue: React.FC<EditIssueProps> = (props) => {
  const { readonly = true } = props;
  const [form] = Form.useForm();
  const { initData, drawingMarks, onPropsChange, onSaveIssue } = props;

  useEffect(() => {
    form.setFields([
      {
        name: 'bhid',
        value: initData.bhid,
      },
      {
        name: 'opinion',
        value: initData.opinion,
      },
    ]);
  }, [initData]);

  const saveButtonClick = (e: any) => {
    if (e) {
      e.preventDefault();
    }
    if (readonly) {
      onPropsChange({
        editIssueReadonly: false,
      });
    } else {
      form.submit();
    }
  };

  const delButtonClick = (e: any) => {
    if (e) {
      e.preventDefault();
    }
  }

  const cancelButtonClick = (e: any) => {
    if (e) {
      e.preventDefault();
    }
    if (readonly) {
      onPropsChange({
        editIssueCollapsed: true,
      });
      form.setFieldsValue({ opinion: null });
    } else {
      onPropsChange({
        editIssueReadonly: true,
      });
      form.setFields([
        {
          name: 'bhid',
          value: initData.bhid,
        },
        {
          name: 'opinion',
          value: initData.opinion,
        },
      ]);
    }
  };

  const handleIssueSave = (e: any) => {
    if (onSaveIssue) {
      onSaveIssue(
        {
          bhid: e.bhid,
          opinion: e.opinion,
          marks: drawingMarks,
        },
        (success: boolean) => {
          if (success) {
            message.success('操作成功！');
            form.setFieldsValue({ opinion: null });
          }
        },
      );
    }
  };

  return (
    <Card
      actions={[
        <Button
          type="link"
          icon={readonly ? <EditOutlined /> : <SaveOutlined />}
          onClick={(e) => {
            saveButtonClick(e);
          }}
        >
          {readonly ? '编辑' : '保存'}
        </Button>,
        <Button
          type="link"
          icon={<DeleteOutlined />}
          onClick={(e) => {
            delButtonClick(e);
          }}
        >
          删除
        </Button>,
        <Button
          type="link"
          icon={<ExportOutlined />}
          onClick={(e) => {
            cancelButtonClick(e);
          }}
        >
          {readonly ? '关闭' : '取消'}
        </Button>,
      ]}
    >
      <Title level={3}>{readonly ? '查看' : '修改'}</Title>
      <Form
        form={form}
        layout="vertical"
        onFinish={(e: any) => {
          if (drawingMarks && drawingMarks.length > 0) {
            handleIssueSave(e);
          } else {
            Modal.confirm({
              title: '提示',
              content: '没有添加标注，是否保存？',
              onOk: () => {
                handleIssueSave(e);
              },
              onCancel: () => {},
            });
          }
        }}
      >
        <Form.Item name="bhid" noStyle>
          <Input hidden />
        </Form.Item>

        <Form.Item
          name="opinion"
          label="审查意见"
          rules={[
            { required: true, message: '必填' },
            { max: 200, message: '最长不超过200个字符！' },
          ]}
        >
          <Input.TextArea readOnly={readonly} maxLength={200} rows={3} />
        </Form.Item>
      </Form>
    </Card>
  );
};

export default EditIssue;
